<template>

  <el-main>


    <el-popover
      placement="bottom"
      width="400"
      height="500"
      trigger="click">

      <el-cascader
        v-model="region"
        :options="regions"
        :props="{ checkStrictly: true }"
        clearable
        ref="cas"
        @change="changeCity"

      ></el-cascader>


      <el-table
        :data="tableData"
        height="400"
        border
        style="width: 100%">
        <el-table-column
          @click="toCounty()">
          <template slot-scope="scope">
            <div @click="toCounty(scope.row)">
              <p>{{scope.row.name}}</p>
              <img :src="scope.row.pic" width="80px">
            </div>
          </template>
        </el-table-column>
      </el-table>



      <el-button style="margin-left: 200px" slot="reference"> ↓ </el-button>
    </el-popover>


      <baidu-map :center="center" class="map" :zoom="zoom" @ready="handler">

        <!-- 自定义图形 -->
        <bml-marker-cluster :averageCenter="true">
          <!-- 自定义信息 -->
          <bm-label v-if="la" v-for="item in citys" :content="item.lookname" :position="{lng: item.longitude, lat: item.latitude}" :offset="{width:-50,height:-45}" :labelStyle="{background: '#5591f4',border:0, fontSize : '8px'}"/>
          <bm-marker v-if="ma" v-for="item in citys" :position="{lng: item.longitude,lat:item.latitude}" @mousedown="mousedown(item)" @mouseout="mouseout" @mouseover="mouseover(item)" :icon="{url: 'http://47.94.105.85:9001/wish/2022/04/01/a.png', size: {width: 150, height: 150}}"></bm-marker>
        </bml-marker-cluster>
        <!-- 行政区域 -->
        <bm-boundary v-if="xz" :name="xzqy"  :strokeWeight="2" strokeColor="red"></bm-boundary>

      </baidu-map>



  </el-main>

</template>
<script>

import {findCityById,findHouse,findAllCity} from "@/api/building/findonmap/findonmap"

export default {
  data () {
    return {
      tableData: [],

      la:true,
      xz:true,
      ma:true,
      visible: false,
      center: undefined,
      zoom: 3,
      citys:[],
      regions:[],
      region:[],
      SProvinces:{
        id:110100,
        county:'',
        city:'',
      },
      provice:"北京市",
      xzqy:''
    }
  },
  methods: {
    //列表去地图地址
    toCounty(county){
      this.center = county.xqname;
    },
    // 三级联动改变获取值
    changeCity(){
      this.SProvinces={
        id:110100,
        county:'',
        city:'',
      }
      let checkedNodes = this.$refs.cas.getCheckedNodes();
      console.log(checkedNodes[0]);
      if (checkedNodes[0].hasChildren&&!checkedNodes[0].parent){
        this.SProvinces.city = 1;
        this.provice = checkedNodes[0].label;
      }
      console.log("pro",this.provice)
      this.center = this.provice + checkedNodes[0].label;
      if (checkedNodes[0].hasChildren&&checkedNodes[0].parent){
        this.SProvinces.county = 1;
      }
      this.SProvinces.id = checkedNodes[0].value;
      this.citys = [];
      this.la = false
      this.ma = false
      if (!checkedNodes[0].hasChildren&&checkedNodes[0].parent){
        findHouse({id:checkedNodes[0].value}).then(res=>{
          console.log(res);
          this.xz = false
          this.citys = res.msgData;
          this.tableData = res.msgData;
          this.$nextTick(()=>{
            this.la = true
            this.ma = true
          })
        })
      }else {
        findCityById(this.SProvinces).then(res=>{
          console.log(res);
          this.citys = res.msgData;
          console.log("citys",this.citys)
          this.$nextTick(()=>{
            this.la = true
            this.ma = true
          })
        })
      }

    },
    //上获取省市县
    findCity(){
      findAllCity().then(res=>{
        this.regions = res.msgData;
      })
    },
    // 点击事件
    mousedown(item){
      this.xz = false
      this.citys = [];
      this.la = false
      this.ma = false
      console.log("mousedown",item);
      if (item.depth!=undefined){
        let split = item.mergerName.split(",");
        this.center = split[1]+item.cityName;
        if (item.depth==2){
          this.SProvinces.couty = 1;
          this.SProvinces.id = item.id;
          findCityById(this.SProvinces).then(res=>{
            console.log(res);
            this.citys = res.msgData;
            this.tableData = [];
            console.log("citys",this.citys)
            this.$nextTick(()=>{
              this.la = true
              this.ma = true
            })
          })
        }
        if (item.depth==3){
          findHouse({id:item.id}).then(res=>{
            console.log(res);
            this.xz = false
            this.citys = res.msgData;
            this.tableData = res.msgData;
            this.$nextTick(()=>{
              this.la = true
              this.ma = true
            })
          })
        }

      }

    },
    // 鼠标悬浮事件
    mouseover(city){
      console.log("mouseover",city)
      let split = city.mergerName.split(",");
      this.xzqy = split[1]+city.cityName;
      console.log("split[1]+city.cityName",split[1]+city.cityName)
    },
    // 鼠标移除事件
    mouseout(){
      this.xzqy = ''
    },
    // 地图初始化
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center= "北京";
      this.zoom = 15
      map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
    }
  },
  created() {
    this.findCity();
    this.region = [
      110000
    ];
    this.SProvinces.county=1;
    findCityById(this.SProvinces).then(res=>{
      console.log(res);
      this.la = false
      this.ma = false
      this.citys = res.msgData;
      this.$nextTick(()=>{
        this.la = true
        this.ma = true
      })
    })
  },
}
</script>
<style scoped>
.map {
  width: 100%;
  height: 600px;
}
.video1:hover+div{
  display: block;
}
.edittool{
  display: none;
}
</style>
